<!-- 薪资排行 -->
<template>
    <view>
        <view class="contaier" style="background-color: #FFFFFF;">
            <view class="top_bg">
                <view class="one_box">
                    <!-- 第二名 -->
                    <view v-if="rankList[1]" class="top3">
                        <view class="num_two" @click="GoUser(rankList[1].username)">
                            <!-- <image class="huangguan2" src="@/static/rank/two.png"></image> -->
                            <image class="top3_head" :src="rankList[1].usertx"></image>
                            <!-- <view class="top_name">{{twoName}}</view> -->
                            <view class="top_name">{{rankList[1].nickname}}</view>
                            <view class="top_sy">邀请：<text class="text-red">{{rankList[1].count}}</text>人</view>
                        </view>
                    </view>

                    <!-- 第一名 -->
                    <view v-if="rankList[0]" class="top3">
                        <view class="num_one" @click="GoUser(rankList[0].username)">
                            <!-- <image class="huangguan1" src="@/static/rank/one.png"></image> -->
                            <image class="top3_head" :src="rankList[0].usertx"></image>
                            <!-- <view class="top_name" style="font-size: 30rpx;">{{oneName}}</view> -->
                            <view class="top_name text-bold" style="font-size: 30rpx;">{{rankList[0].nickname}}</view>
                            <view class="top_sy">邀请：<text class="text-red">{{rankList[0].count}}</text>人</view>
                        </view>
                    </view>

                    <!-- 第三名 -->
                    <view v-if="rankList[2]" class="top3">
                        <view class="num_three" @click="GoUser(rankList[2].username)">
                            <!-- <image class="huangguan2" src="@/static/rank/three.png"></image> -->
                            <image class="top3_head" :src="rankList[2].usertx"></image>
                            <view class="top_name">{{rankList[2].nickname}}</view>
                            <view class="top_sy">邀请：<text class="text-red">{{rankList[2].count}}</text>人</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="rankList_box">
                <view class="rankItem" v-for="(item,index) in rankList" :key="index" v-if="index>2" @click="GoUser(item.username)">
                    <view class="rankIndex">
                        <text>{{ index + 1 }}</text>
                    </view>
                    <view class="HeardBox">
                        <image class="rankHeard" :src="item.usertx"></image>
                    </view>
                    <view class="NameBox">
                        <view class="userName text-bold">{{item.nickname}}</view>
                        <view class="userPost text-gray">邀请：<text class="text-red">{{item.count}}</text>人</view>
                        <view class="color_ccc">{{item.signature}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import API from "../../util/request.js";
    export default {
        data() {
            return {
                rankList: []
            }
        },
        onLoad() {
            this.getRank();
        },
        methods: {
            getRank: function() {
                var that = this;
                uni.request({
                    url: API.GetinviterList(),
                    success: (res) => {
                        var data = JSON.parse(that.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
                        that.rankList = data.data;
						console.log(that.rankList)
                    }
                })
            },
            GoUser: function(e) {
                uni.navigateTo({
                    url: '/pages/user/user?username=' + e
                })
            },
        },
        filters: {

        }
    }
</script>

<style lang="scss">
    .top_bg {
        width: 750rpx;
        height: 650rpx;
        background: url('../../static/my/rank_bg.png') no-repeat;
        background-size: 750rpx;
        position: relative;
    }

    .one_box {
        width: 750rpx;
        height: 260rpx;
        position: absolute;
        left: 0;
        bottom: 118rpx;
        display: flex;
        justify-content: space-around;
    }

    .one_box .top3 {
        width: 210rpx;
        height: 280rpx;
    }

    .top_name {
        width: 100%;
        height: 55rpx;
        line-height: 60rpx;
        color: #f2f2f2;
        font-size: 26rpx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top_sy {
        width: 100%;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-red {
        color: #ff0000;
        margin-right: 6rpx;
    }

    .num_one {
        position: relative;
    }

    .huangguan1 {
        width: 60px;
        height: 60px;
        position: absolute;
        right: -10rpx;
        top: -18*2rpx;
    }

    .num_one .top3_head {
        width: 150rpx;
        height: 150rpx;
        border-radius: 100%;
        margin: 15rpx 0 0 30rpx;
        border: 4rpx solid #ffdd3c;
    }

    .num_two {
        position: relative;
    }

    .huangguan2 {
        width: 100rpx;
        height: 100rpx;
        position: absolute;
        right: 15rpx;
    }

    .num_two .top3_head {
        width: 120rpx;
        height: 120rpx;
        border-radius: 100%;
        margin: 45rpx 0 0 45rpx;
        border: 4rpx solid #bcdcdf;
    }

    .num_three {
        position: relative;
    }

    .huangguan2 {
        width: 100rpx;
        height: 100rpx;
        position: absolute;
        right: 15rpx;
    }

    .num_three .top3_head {
        width: 120rpx;
        height: 120rpx;
        border-radius: 100%;
        margin: 45rpx 0 0 45rpx;
        border: 4rpx solid #e29d85;
    }

    // 列表
    .rankList_box {
        width: 750rpx;
        min-height: 200rpx;
    }

    .rankItem:last-child {
        border: none;
    }

    .rankItem {
        width: 700rpx;
        height: 140rpx;
        margin: 0px auto;
        border-bottom: 1px solid #e9e9e9;
    }

    .rankIndex {
        width: 60rpx;
        height: 140rpx;
        line-height: 140rpx;
        text-align: center;
        color: #CCCCCC;
        font-size: 40rpx;
        float: left;
    }

    .HeardBox {
        width: 100rpx;
        height: 100rpx;
        margin: 20rpx;
        border-radius: 100%;
        overflow: hidden;
        float: left;
        margin-right: 25rpx;
        margin-left: 10rpx !important;
    }

    .HeardBox image {
        width: 100%;
        height: 100%;
    }

    .NameBox {
        width: 400rpx;
        height: 140rpx;
        float: left;
        padding-top: 10rpx;
        box-sizing: border-box;
    }

    .NameBox view {
        height: 50rpx;
        line-height: 70rpx;
    }

    .userName {
        min-width: 90rpx;
        font-size: 30rpx;
        float: left;
        margin-right: 20rpx;
    }

</style>
